<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JSONP优化之封装</title>
</head>
<body>


	 <!-- JSONP优化之封装： -->
	 <button id="btn">点我发送请求</button>
	 <!-- 定义一个全局作用域下的函数且必须在执行函数之前  -->
<!-- <script>
	function fn2 (data) {
					console.log("被定义的这个全局作用域的fn1函数被调用啦")
					console.log(data);
                       }
</script>
 -->

<script type="text/javascript">
	// 获取按钮
	var btn = document.getElementById("btn");
	// 为按钮添加点击事件
	btn.onclick =function (){
		// 调用封装的函数
		jsonp({
			// 请求地址
			// url:"http://localhost:3001/better?callback=fn2",
			url:"http://localhost:3001/better",
			success:function(data){
				console.log('将定义的函数也封装进去了');
				console.log(data);

			},
			data:{
				name:"lisi",
				age:28,
			}

		})
	}


	// 将JSONP封装成函数
	function jsonp(options){
		// 创建script标签
		var script = document.createElement("script");
		// 拼接字符串的变量
		var params ="";
		for(var attr in options.data){
			params += "&"+attr+"="+options.data[attr];
		}


		// 解决多次请求函数名重复导致的数据重叠问题(函数名myjsonp-123456格式)
		var fnName = "myjsonp" + Math.random().toString().replace(".", "")


		// 将定义的函数也封装进去了，但是它已经不是全局函数了（因此我们要想办法将他变成全局函数就要挂载到window对象下）
		window[fnName] = options.success;

		// 设置src属性
		script.src=options.url + "?callback=" + fnName + params;
		// 将script标签追加到页面中
		document.body.appendChild(script);
		// 为script标签添加onload事件
		script.onload=function(){
			// 将body中的script标签删除
			document.body.removeChild(script);
		}

	}
	


</script>







		
		
	
</body>
</html>